<template>
  <div
    class="home_container"
    :style="isPadding"
    ref="top"
    :class="{ mohu: show }"
  >
    <!-- 头部广告区域 -->
    <div class="logo" v-if="showAppBun">
      <Logo @changeShowAppOrSearch="showAppBun = false" />
    </div>
    <!-- 搜索框 -->
    <div class="search" v-if="!showAppBun">
      <Search />
    </div>
    <!-- 图片导航 -->
    <Icon />
    <div style="height: 0.1707rem; background: rgb(247, 249, 251)"></div>
    <!-- 推荐专题 -->
    <Recommend />
    <!-- 电梯模块 -->
    <Floor @showMo="showMo" />
  </div>
</template>

<script>
import Search from "./Search.vue";
import Logo from "./Logo.vue";
import Icon from "./Icon.vue";
import Recommend from "./Recommend.vue";
import Floor from "./Floor.vue";
export default {
  name: "Home",
  props: [],
  data() {
    return {
      //控制头部显示与隐藏
      showAppBun: true,
      //是否模糊
      show: false,
    };
  },
  methods: {
    showMo(show) {
      console.log(111);
      this.show = show;
    },
  },
  computed: {
    //根据头部固定定位，更改对应的padding
    isPadding() {
      return `padding-top:${this.showAppBun ? 114 : 54}px;`;
    },
  },
  components: {
    Logo,
    Search,
    Icon,
    Recommend,
    Floor,
  },
};
</script>

<style lang="less" scoped>
.home_container {
  padding-bottom: 50px;
  .logo,
  .search {
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
  }
  .goTop {
    position: fixed;
    bottom: 70px;
    right: 20px;
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>